<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>过滤器</title>
		<script src="../../JS/dayjs.min.js"></script>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
             过滤器：
                定义：对要显示的数据特定格式化后在显示(适用于一些简单逻辑的处理)
                语法：
                    1.注册过滤器： Vue.filter(name,callback) 或 new Vue{filters:{}}
                    2.使用过滤器：{{xxx|过滤器名}} 或 v-bind:属性 = 'xxx | 过滤器名'
                备注：
                    1.过滤器也可以接收额外参数，多个过滤器也可以串联
                    2.并没有改变原本的数据，是产生新的对应的数据
                -->
		<div id="root">
			<h2>显示格式化的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是:{{fmTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是:{{getFmTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是:{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			Vue.filter('mySlice', function (value) {
				return value.slice(0, 11)
			})

			const vm = new Vue({
				el: '#root',
				data: {
					time: Date.now()
				},
				computed: {
					fmTime() {
						return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
					}
				},
				methods: {
					getFmTime() {
						return dayjs(this.time).format('HH:mm:ss')
					}
				},
				// 局部过滤器
				filters: {
					timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
						return dayjs(value).format(str)
					}
				}
			})
		</script>
	</body>
</html>
